<template>
  <div class="singer_top50">
    <div class="song_info">
      <div class="song_play_hot">
        <div>
          <div class="song_play">
            <SvgIcon class="icon_play" icon="icon-bofang1"></SvgIcon>
            <span>播放</span>
          </div>
          <span class="add_playlist">+</span>
        </div>
        <div class="song_hot">
          <SvgIcon class="icon_collect" icon="icon-tianjiawenjian"></SvgIcon>
          <i class="singer_collect">收藏热门50</i>
        </div>
      </div>
      <div class="song_select">
        <select name="songSort" class="song_sort" id="songSort">
          <option value="a" class="song_sort_option">热门单曲</option>
          <option value="b" class="song_sort_option">作词作品</option>
          <option value="c" class="song_sort_option">作曲作品</option>
        </select>
      </div>
    </div>
    <div class="hotsong_list">
      <table>
        <tbody>
          <tr v-for="(song, index) in artistHotsongs" :key="song.al.id">
            <td class="song_index">
              <div>
                <span>{{ `${index + 1}` }}</span>
                <SvgIcon class="song_play" icon="icon-song-play"></SvgIcon>
              </div>
            </td>
            <td class="song_name">
              <div>
                <a href="#">{{ `${song.name}` }}</a>
                <span
                  class="song_title"
                  :title="`${song.alia}`"
                  v-if="song.alia[0] !== undefined"
                  >&nbsp;-&nbsp;{{ `(${song.alia[0]})` }}</span
                >
                <div v-if="song.mv !== ''">
                  <SvgIcon class="song_playMV" icon="icon-MV"></SvgIcon>
                </div>
              </div>
            </td>
            <td class="song_time">
              <span>{{ `${song.dt}` }}</span>
            </td>
            <td class="song_album">
              <span :title="`${song.al.name}`">{{ `${song.al.name}` }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Hotsongs',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type {
  ArtistHotsongsList,
  GetArtistHotsongsListResponse,
} from '@/api/modules/singerDetailModel'
import { reqArtistHotsongs } from '@/api/singerDetail'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { formartDate, formatSongTime } from '@/utils/tools'

const route = useRoute()
// 歌手热门歌曲数据
const artistHotsongs = ref<ArtistHotsongsList>([
  {
    // 歌曲详情
    al: {
      id: '', // 歌曲id
      name: '', // 专辑名
      picUrl: '', // 专辑图片
    },
    alia: [], // 歌曲标题
    ar: [], // 歌手信息
    name: '', // 歌名
    mv: '', // mv的id
    dt: '', // 歌曲时长
  },
])
// 获取歌手的热门歌曲
const getArtitsHotsongs = async () => {
  const id = route.query.id as string
  const res = await reqArtistHotsongs(id)
  artistHotsongs.value = res.songs
  artistHotsongs.value.map((song) => (song.dt = formatSongTime(song.dt))) // 歌曲时间格式化

  // console.log(res)
}
onMounted(() => {
  getArtitsHotsongs()
})
watch(route, () => {
  console.log('路由发生改变')
  getArtitsHotsongs()
})
</script>

<style lang="less" scoped>
.singer_top50 {
  width: 640px;
  margin: 20px 0 10px 0;
  .song_info {
    display: flex;
    width: 640px;
    height: 31px;
    justify-content: space-between;
    align-items: center;
    .song_play_hot {
      width: 200px;
      height: 31px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      div {
        display: flex;
        justify-content: left;
        .song_play {
          width: 65px;
          height: 31px;
          position: relative;
          background-color: #3483cf;
          border-radius: 5px;
          .icon_play {
            height: 31px;
            line-height: 31px;
            font-size: 16px;
            margin-left: 5px;
            margin-right: 5px;
            color: #fff;
          }
          span {
            position: absolute;
            height: 31px;
            line-height: 31px;
            right: 15px;
            font-size: 12px;
            color: #fff;
          }
          &:hover {
            cursor: pointer;
            background-color: #3483cfbf;
          }
        }
        .add_playlist {
          width: 33px;
          height: 31px;
          line-height: 31px;
          text-align: center;
          color: #fff;
          font-size: 20px;
          border-left: 1px solid #fff;
          background-color: #3483cf;
          border-radius: 5px;
          &:hover {
            cursor: pointer;
            background-color: #3483cfbf;
          }
        }
      }
      .song_hot {
        width: 95px;
        height: 31px;
        height: 31px;
        margin-left: 5px;
        background-color: #f1f1f1;
        color: #1b1c1c;
        border: 1px solid #c4c4c4;
        border-radius: 5px;
        .icon_collect {
          margin-left: 5px;
          font-size: 20px;
          height: 31px;
          line-height: 31px;
        }
        .singer_collect {
          width: 80px;
          margin-left: 2px;
          font-size: 12px;
          height: 31px;
          line-height: 31px;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
    .song_select {
      padding-right: 2px;
      .song_sort {
        width: 102px;
        height: 31px;
        text-align: center;
        color: #333;
        font-size: 12px;
        .song_sort_option {
          width: 102px;
          height: 31px;
        }
      }
    }
  }
  .hotsong_list {
    margin-top: 10px;
    table {
      width: 640px;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
      align-items: center;
      tr:nth-of-type(2n + 1) {
        background-color: #fff;
      }
      tr {
        align-items: center;
        td {
          height: 30px;
          padding: 6px 10px;
        }
        td.song_index {
          width: 94px;
          div {
            height: 18px;
            line-height: 18px;
            display: flex;
            justify-content: space-between;
            span {
              display: inline-block;
              font-size: 12px;
              color: #999;
            }
            .song_play {
              height: 18px;
              line-height: 18px;
            }
          }
        }
        td.song_name {
          width: 309px;
          word-break: keep-all;
          word-wrap: break-word;
          div {
            height: 18px;
            line-height: 18px;
            display: flex;
            justify-content: left;
            align-items: center;
            a {
              font-size: 12px;
              height: 18px;
              line-height: 18px;
              color: #333;
              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
            .song_title {
              display: inline-block;
              font-size: 12px;
              color: #aeaeae;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            div {
              padding: 1px 3px;
              border: 1px solid #cfcfcf;
              margin-left: 2px;
              .song_playMV {
                font-size: 16px;
                &:hover {
                  cursor: pointer;
                  transform: scale(1.2);
                }
              }
            }
          }
        }
        td.song_time {
          width: 89px;
          vertical-align: top;
          span {
            display: inline-block;
            // height: 18px;
            // line-height: 18px;
            font-size: 12px;
            color: #666;
          }
        }
        td.song_album {
          width: 128px;
          span {
            display: inline-block;
            font-size: 12px;
            color: #333;
            height: 18px;
            vertical-align: bottom;
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              cursor: pointer;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
